<template>
	<view class="Outerlayer">

		<view class="x-wrapper">
			<view class="bannerOptions">
				<view class="left" @click="goChooseCity">
					<img class="locationImg" src="@/static/icon/c.png"></img>
					<span>{{locationCity}}</span>
				</view>
				<view class="right" @click="goSearch">
					<img src="../../static/icon/ss.png" alt="">
					<input :placeholder='placeholder' border="none" :clearable="true" fontSize="28rpx" color="#333"
						placeholderStyle="color:#9AA2B7" maxlength="11" v-model="hostpotal" class="f-input" disabled></input>
				</view>
			</view>
			<view class="banner">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item class="swiper-item">
						<img class="bannerImg" src="http://www.peiyiyiliao.com/QRCodeShare/imgs/banner1.jpg"></img>
					</swiper-item>
					<swiper-item @click="goShare" class="swiper-item">
						<img class="bannerImg" src="http://www.peiyiyiliao.com/QRCodeShare/imgs/banner2.jpg"></img>
					</swiper-item>
					<swiper-item class="swiper-item">
						<img class="bannerImg" src="http://www.peiyiyiliao.com/QRCodeShare/imgs/banner3.jpg"></img>
					</swiper-item>
				</swiper>
			</view>
			<view class="mainPadding notice">
				<img src="@/static/home/notice.png" />
				<span class="title">通知公告</span>
				<span class="content">陪依APP版本更新啦！</span>
				<view class="more">
					<img src="@/static/icon/more.png" />
				</view>
			</view>
			<!-- 九宫格 -->
			<view class="Ninesquare">
				<view class="pane" v-for="(item,index) in userOptions" @click="goFunction(index)" :key="index">
					<img :src="item.icon" class="Registeredimg" alt="" />
					<span class="">{{item.desc}}</span>
				</view>
			</view>
			<view class="peizhen">
				<view class="left1" @click="jump('1')">
					<view class="perzhentext">
						<span class="perzhentext_big">就医陪诊</span>
						<view class="perzhentext_bottom">
							<span class="perzhentext_bottom1">陪诊套餐</span>
							<span class="perzhentext_bottom2">可供选择</span>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="rightTop" @click="jump('2')">
						<view class="perzhentext">
							<span class="perzhentext_big">夜间陪诊</span>
							<view class="perzhentext_bottom">
								<span class="perzhentext_bottom1">夜间陪诊</span>
								<span class="perzhentext_bottom2">套餐优惠</span>
							</view>
						</view>
					</view>
					<view class="rightBottom">
						<view class="perzhentext" @click="jump('3')">
							<span class="perzhentext_big">VIP陪诊</span>
							<view class="perzhentext_bottom">
								<span class="perzhentext_bottom1">尊贵服务</span>
								<span class="perzhentext_bottom2">挂号专家</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<img src="https://peiyiwang.obs.cn-east-3.myhuaweicloud.com:443/file%2F2796932692761126.jpg" class="imghf"
				alt="" @click="goShare1()">
			<view class="recommend">
				<view class="recommend_bg" v-for="(item,index) in introduce" @click="gosuggest(index)" :key="index">
					<img :src="item.img" class="recommend1" alt="" />
					<view class="recomtext1">
						<span class="title1">
							{{item.title}}
						</span>
						<view class="text1">
							<span class="text1p">{{item.mintitletop}}</span>
							<span class="text1b">{{item.mintitlebot}}</span>
						</view>
					</view>
				</view>
				<!--<view class="recommend_bg" >
					<img src="../../static/home/Group1.png" class="recommend1" alt="" />
					<view class="recomtext1">
						<span class="title1">
							名医推荐
						</span>
						<view class="text1">
							<span class="text1p">各大医院</span>
							<span class="text1b">专家名医</span>
						</view>
					</view>
				</view>
				<view class="recommend_bg">
					<img src="../../static/home/Group2.png" class="recommend2" alt="" />
					<view class="recomtext1">
						<span class="title1">
							陪护推荐
						</span>
						<view class="text1">
							<span class="text1p">专业陪护</span>
							<span class="text1b">贴心服务</span>
						</view>

					</view>
				</view>
				<view class="recommend_bg"> 
					<img src="../../static/home/Group3.png" class="recommend3" alt="" />
					<view class="recomtext1">
						<span class="title1">
							医院推荐
						</span>
						<view class="text1">
							<span class="text1p">名院名医</span>
							<span class="text1b">安心就诊</span>
						</view>

					</view>
				</view>-->
			</view>
			<!-- <view class="mainPadding userOptions" v-if="userWindow=='001'">
			<view class="option" v-for="(item,index) in userOptions" @click="goFunction(index,item.desc)" :key="index">
				<img :src="item.icon" class="optionImg" />
				<span>{{ item.desc }}</span>
			</view>
		</view>
		<view style="width: 100vw; height: 10rpx; background-color: #f6f6f6;"></view>
	
		<view class="detail" style="background-color: #f3f4f9; min-height: calc(100% - 674rpx );">
			<view v-if="userWindow=='001'">
				<view class="mainPadding header">
					<view class="title">名医推荐</view>
					<view class="more" @click="goDoc">
						<span>更多</span>
						<img src="@/static/icon/more.png" />
					</view>
				</view>
				<view class="detailContent" style="margin-top: 30rpx;">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<doctorCard v-for="item in doctors" :key="item.id" class="scroll-view-item_H"
							:doctorInfo="item" />
					</scroll-view>
				</view>
			</view>
			<view v-if="userWindow=='001'">
				<view class="mainPadding header">
					<view class="title">热门陪护</view>
					<view class="more" @click="goCompanion">
						<span>更多</span>
						<img src="@/static/icon/more.png" />
					</view>
				</view>
				<view class="mainPadding detailContent">
					<peihuCard v-for="item in peihus" :key="item.id" :peihuInfo="item" />
				</view>
			</view>
			<view class="">
				<view class="mainPadding header" @click="goHosp">
					<view class="title">医院推荐</view>
					<view class="more">
						<span>更多</span>
						<img src="@/static/icon/more.png" />
					</view>
				</view>
				<view class="detailContent">
					<hospitalCard v-for="item in hospitals" :key="item.id" class="hospitalCard" :hospitalInfo="item" />
				</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" icon="http://www.peiyiyiliao.com/QRCodeShare/imgs/ic_top.png"
			:iconStyle="iconStyle" bottom="280rpx"></u-back-top> -->
		</view>
		<view class="blank"></view>
		<view class="bottom_content">
			<view class="content_tab">
				<!-- <view class="tab_text">
					<span>全部</span>
					<view class="bars">

					</view>
				</view>
				<view class="tab_text">
					<span>陪诊服务</span>
					<view class="bars">

					</view>
				</view>
				<view class="tab_text">
					<span>VIP服务</span>
					<view class="bars">

					</view>
				</view>
				<view class="tab_text">
					<span>夜间陪诊</span>
					<!-- <view class="bars">
					</view>
				</view>  -->
				<u-tabs :list="list1" :current="current" :scrollable="false" @click="tabsClick"></u-tabs>
			</view>
			<view class="tab_content">
				<view class="accompany1" @click="godetail(item.id)" v-for="(item,index) in showList" :key="index">
					<img :src="item.image" class="serve1img" alt="" />
					<view class="accompany1_con">
						<span class="house1">{{item.name}}</span>
						<view class="price">
							<span class="price1">￥{{item.price}}元 </span>
							<view class="ins_bott">
								<span class="sale">已售{{salesNumber}}件</span>
								<span class="instantly" @click.stop="yuYUE(item.id)">立即预约</span>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="accompany1">
					<img src="https://peiyiwang.obs.cn-east-3.myhuaweicloud.com:443/file%2F5288617231738668.png"
						class="serve1img" alt="" />
					<view class="accompany1_con">
						<span class="house1">2小时陪诊</span>
						<view class="price">
							<span class="price1">￥200</span>
							<view class="ins_bott">
								<span class="sale">已售203件</span>
								<span class="instantly">立即预约</span>
							</view>
						</view>
					</view>
				</view> -->

			</view>
		</view>
		<tabBar selectedIndex=0></tabBar>
	</view>
</template>

<script>
	import hospitalCard from './components/hospitalCard.vue'
	import doctorCard from './components/doctorCard.vue'
	import peihuCard from './components/peihuCard.vue'

	export default {
		components: {
			hospitalCard,
			doctorCard,
			peihuCard,
		},

		data() {
			return {
				// 自动切换时间间隔
				interval: 5000,
				autoplay: true,
				indicatorDots: true,
				duration: 500,
				scrollTop: 0,
				placeholder: '苏州热门医院',
				iconStyle: {
					width: '36px',
					height: '36px',
				},
				hostpotal: '',
				customIconPath: '../../static/icon/c.png', // 自定义图标的路径
				userWindow: '',
				locationCity: '',
				current: 0,
				salesNumber: 0,
				serverList1: [],
				showList: [],
				list1: [{
					name: '全部',
					value: ""
				}, {
					name: '陪诊服务',
					value: 1
				}, {
					name: '夜间陪诊',
					value: 2
				}, {
					name: 'VIP服务 ',
					value: 3
				}, ],
				serverList: [{
					id: 1,
					serverData: "2小时陪诊",
					serverPrice: "￥200",
					Sale: "已售203件",
					booking: "立即预约",
					img: "https://peiyiwang.obs.cn-east-3.myhuaweicloud.com:443/file%2F5288617231738668.png"

				}, {
					id: 2,
					serverData: "4小时陪诊",
					serverPrice: "￥400",
					Sale: "已售203件",
					booking: "立即预约",
					img: "https://peiyiwang.obs.cn-east-3.myhuaweicloud.com:443/file%2F5288617231738668.png"
				}],
				// id 为了接受desc对应的serviceList的id值
				id:0,
				userOptions: [{

						icon: "http://www.peiyiyiliao.com/QRCodeShare/imgs/guahao.png",
						desc: "排队挂号",
					},
					{
						icon: "http://www.peiyiyiliao.com/QRCodeShare/imgs/peihu.png",
						desc: "代办跑腿",
					},
					{
						icon: "http://www.peiyiyiliao.com/QRCodeShare/imgs/jieguo.png",
						desc: "代取结果"
					},
					{
						icon: "http://www.peiyiyiliao.com/QRCodeShare/imgs/peizhen.png",
						desc: "代问诊"
					},
					{
						icon: "http://www.peiyiyiliao.com/QRCodeShare/imgs/quyao.png",
						desc: "代取药"
					},
				],
				hospitals: [{
						id: 1,
						name: "宣武医院",
						level: '三甲',
						type: "综合医院",
						tel: '0512-65223637',
						address: '苏州市平海路899号'
					},
					{
						id: 2,
						name: "北京儿童医院",
						level: '三甲',
						type: "儿童医院",
						tel: '0512-65223637',
						address: '苏州市平海路899号'
					},
					{
						id: 3,
						name: "北京口腔医院（天坛部）",
						level: '三甲',
						type: "口腔医院",
						tel: '0512-65223637',
						address: '苏州市平海路899号'
					}
				],
				introduce: [{
					id: 1,
					title: "名医推荐",
					mintitletop: "各大医院",
					mintitlebot: "专家名医",
					img: "https://peiyiwang.obs.cn-east-3.myhuaweicloud.com:443/file%2F37666170589333924.png"
				}, {
					id: 2,
					title: "陪护推荐",
					mintitletop: "专业陪护",
					mintitlebot: "贴心服务",
					img: "https://peiyiwang.obs.cn-east-3.myhuaweicloud.com:443/file%2F24988668307082717.png"
				}, {
					id: 3,
					title: "医院推荐",
					mintitletop: "名院名医",
					mintitlebot: "安心就诊",
					img: "https://peiyiwang.obs.cn-east-3.myhuaweicloud.com:443/file%2F9176319954552837.png"
				}, ],
				doctors: [{
						id: 1,
						name: '李松',
						title: '主治医师',
						depart: '外科',
						img: require('@/static/home/profile_picture_1.png')
					},
					{
						id: 2,
						name: '陈新成',
						title: '主治医师',
						depart: '内科',
						img: require('@/static/home/profile_picture_1.png')
					},
					{
						id: 3,
						name: '杨柯奇',
						title: '主治医师',
						depart: '神经外科',
						img: require('@/static/home/profile_picture_1.png')
					},
				],
				peihus: [{
						id: 1,
						name: '刘芳',
						type: 0,
						typeDesc: '陪诊',
						peizhengNo: 83,
						workTime: 2,
						score: 100,
						subscribeNo: 23,
						img: require('@/static/home/doctor_1.png')
					},
					{
						id: 2,
						name: '陈婷',
						type: 1,
						typeDesc: '护工到家',
						peizhengNo: 83,
						workTime: 2,
						score: 100,
						subscribeNo: 23,
						img: require('@/static/home/doctor_1.png')
					},
					{
						id: 3,
						name: '李丽',
						type: 0,
						typeDesc: '陪诊',
						peizhengNo: 83,
						workTime: 2,
						score: 100,
						subscribeNo: 23,
						img: require('@/static/home/doctor_1.png')
					},
					{
						id: 4,
						name: '苏云',
						type: 2,
						typeDesc: '护理',
						peizhengNo: 83,
						workTime: 2,
						score: 100,
						subscribeNo: 23,
						img: require('@/static/home/doctor_1.png')
					},
				]

			}
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
			let city = uni.getStorageSync('myAddress')
			if (city) {
				this.locationCity = city.name
				this.placeholder=`${city.name}热门医院`
			} else {
				// this.locationCity = '请选择城市' 
				this.locationCity = '苏州'
				let obj = {
					name: '苏州',
					cityId: 320500
				}
				uni.setStorageSync('myAddress', obj);
			}
		},
		mounted() {
			// this.getData(); // 在mounted钩子中调用获取后端数据的方法
		},
		onLoad() {
			this.getServiceAllList();
			this.getSalesNumber();
		},

		created() {
			this.userWindow = uni.getStorageSync('userWindow')
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			goShare1() {
				uni.navigateTo({
					url: '/pages/mine/share'
				})
			},
			tabsClick(e) {
				this.current = e.search
				if (e.search == '0') {
					this.showList = this.serverList1
				} else {
					this.showList = this.serverList1.filter(i => {
						return i.type == e.search
					})
				}
				
			},
			yuYUE(e) {
				let token = uni.getStorageSync('token')
				if(!token){
					this.goLogin()
					return
				}
				let id = e;
				console.log(e)
				uni.navigateTo({
					url: `/pages/business/chaperonage?id=${id}`
				})
			},
			async getServiceAllList() {
				let data = {}
				let res = await this.$request('/api/service/getServiceAllList', data, 'GET')
				this.serverList1 = res.data.data
				this.showList = this.serverList1

			},
			async getSalesNumber() {
				//Math.floor(Math.random() * 10)
				this.salesNumber = 232
				console.log(this.salesNumber)
			},
			jump(type) {
				let token = uni.getStorageSync('token')
				if(!token){
					this.goLogin()
					return
				}
				const filteredObjects = this.showList.filter(obj => obj.type === type);
				console.log(this.showList, 9999, filteredObjects)
				uni.navigateTo({
					url: '/pages/business/listDetail?data=' + encodeURIComponent(JSON.stringify(filteredObjects)),
					// data: {
					// 	objects: filteredObjects
					// },
					success: function(res) {
						// 跳转成功的回调函数
						console.log('跳转成功');
					},
					fail: function(err) {
						// 跳转失败的回调函数
						console.log('跳转失败', err);
					}
				});

			},
			/**
			 * 通过this.showList 获取对应的套餐的id值
			 * 循环匹配
			 */
			getSeviceListById(e){
				for (var i = 0; i < this.showList.length; i++) {
					if(e == this.showList[i].name){
						this.id = this.showList[i].id;
					}
				}
				console.log(this.id)
			},
			// getData() {
			// 	uni.request({
			// 		url: '/api/service/getServiceAllList',
			// 		method: 'GET',
			// 		header:{
			// 			token:"eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImM3M2M0ODQ5LTU5OGUtNDNjNi04NWM1LTBjNTM5NmZlNzRjYyJ9.oquqHFHMdR_r35nmaOpK4ziT8BC-KqYpgObQc2nMJNAbNu_mBCATJp-D2x94aTQFkb-NfQEMKQ6QpuK9NK_H2A",
			// 			Authorization:"abcdefghijklmnopqrstuvwxyz"

			// 		},
			// 		success: (res) => {
			// 			console.log(res)
			// 			// this.backendData = res.data;
			// 		},
			// 		fail: (err) => {
			// 			console.error(err);
			// 		}
			// 	});
			// },
			godetail(item) {
				console.log("详情", item)
				uni.navigateTo({
					url: '/pages/business/Accompanying?id=' + item
				})
			},
			gosuggest(index) {
				let token = uni.getStorageSync('token')
				if(!token){
					this.goLogin()
					return
				}
				console.log(index, 8888)
				if (index == 0) {
					uni.switchTab({
						url: '/pages/doctor/doctor'
					})
				} else if (index == 1) {
					uni.switchTab({
						url: '/pages/companion/companion'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages/hospital/hospital'
					})
				}

			},
			// goFunction(index, desc) {
			// 	uni.navigateTo({
			// 		url: `/pages/business/chaperonage?index=${index}&desc=${desc}`
			// 	})
			// },
			goHosp() {
				let city = uni.getStorageSync('myAddress')
				if (city.cityId) {
					uni.navigateTo({
						url: '/pages/hospital/hospital',
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未选择城市，是否前去选择？',
						success: res => {
							if (res.confirm) {
								this.goChooseCity()
							}
							if (res.cancel) {
								return
							}
						}
					})
				}

			},
			// goDoc() {
			// 	uni.switchTab({
			// 		url: '/pages/doctor/doctor',
			// 	})
			// },
			goCompanion() {
				uni.switchTab({
					url: '/pages/companion/companion',
				})
			},
			goChooseCity() {
				uni.navigateTo({
					url: '/pages/business/chooseItem?code=' + 'city'
				})
			},
			goSearch() {
				this.$u.route({
					url: 'packageA/pages/search/search'
				})
			},
			goShare() {
				uni.navigateTo({
					url: '/pages/mine/share'
				})
			},
			onShareAppMessage() {
				return {
					title: '陪依',
					path: '/pages/loading/index'
				}
			},
			onShareTimeline() {
				return {
					title: '陪依',
				}
			},
			goLogin(){
				uni.showModal({
					title: '提示',
					content: '您还未登录，是否前去登录？',
					success: res => {
						if (res.confirm) {
							uni.redirectTo({url:'/pages/login/login'})
						}
						if (res.cancel) {
							return
						}
					}
				})
			},
			goFunction(index) {
				let token = uni.getStorageSync('token')
				if(!token){
					this.goLogin()
					return
				}
				this.getSeviceListById(this.userOptions[index].desc);
				switch (index) {
					case 0:
						uni.navigateTo({
							url: '/pages/business/registration?id=' + this.id
						})
						break;
					case 1:
						uni.navigateTo({
							// 跳转到代办跑腿 id = 29
							url: '/pages/business/chaperonage?id=' + this.id
						})
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/business/chaperonage?id=' + this.id
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/business/result?id='+ this.id
						})
						break;
					case 4:
						uni.navigateTo({
							url: '/pages/business/getMedicine?id='+ this.id
						})
						break;
					default:
						// 处理其他情况或跳转到默认页面  
				}


			},
		},

	}
</script>

<style lang="scss" scoped>
	.Outerlayer {

		.x-wrapper {
			// height: 100%;
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			margin-right: 20rpx;
			box-sizing: border-box;
			// margin-bottom: 32rpx;
			overflow: hidden;

			.bannerOptions {
				width: 100vw;
				height: 52rpx;
				margin-top: 85rpx;
				margin-bottom: 20rpx;
				display: flex;

				.left {
					height: 100%;
					display: flex;
					align-items: center;

					.locationImg {
						width: 46rpx;
						height: 46rpx;
					}

					span {
						font-size: 34rpx;
						font-weight: 500;
						color: #000;
					}
				}

				.right {
					height: 100%;
					margin-left: 20rpx;
					display: flex;
					align-items: center;
					justify-content: right;
					background-color: #F7F7F7;
					border-radius: 12rpx;
					width: 50%;


					img {
						width: 38rpx;
						height: 38rpx;
						margin-left: 2rpx;
					}
				}
			}


			.mainPadding {
				padding-left: 38rpx;
				padding-right: 38rpx;
				box-sizing: border-box;
			}



			.banner {
				height: 340rpx;
				border-radius: 20rpx;

				.bannerImg {
					width: 100%;
					height: 100%;
					border-radius: 20rpx !important;
				}

				.swiper {
					height: 340rpx;
					border-radius: 20rpx !important;

					.swiper-item {
						border-radius: 20rpx !important;
					}

					/deep/.uni-swiper-dot {
						width: 9rpx;
						height: 9rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 1rpx 1rpx 0rpx rgba(0, 0, 0, 0.3);
						opacity: 0.72;
					}

					/deep/.uni-swiper-dot-active {
						width: 18rpx;
						height: 9rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 1rpx 1rpx 0rpx rgba(0, 0, 0, 0.3);

					}
				}
			}

			.Ninesquare {
				display: flex;
				justify-content: space-between;
				margin: 10rpx;

				.pane {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 28rpx;
					color: #555555;

					.Registeredimg {
						width: 80rpx;
						height: 80rpx;
					}
				}
			}

			.peizhen {



				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 314rpx;
				margin-top: 18rpx;
				color: #FFFFFF;
				font-size: 24rpx;

				.left1 {
					width: 336rpx;
					heigth: 314rpx;
					background-image: url('https://peiyiwang.obs.cn-east-3.myhuaweicloud.com:443/file%2F7767178331574039.png');
					background-size: cover;

					.perzhentext {
						margin-top: 30rpx;
						margin-left: 20rpx;

						.perzhentext_big {
							font-size: 32rpx
						}

						.perzhentext_bottom {
							display: flex;
							flex-direction: column;
							margin-top: 20rpx;
						}
					}
				}

				.right {
					width: 336rpx;
					heigth: 314rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.rightTop {
						width: 100%;
						height: 148rpx;
						background-image: url('https://peiyiwang.obs.cn-east-3.myhuaweicloud.com:443/file%2F17537279909007486.png');
						background-size: cover;

						.perzhentext {
							margin-top: 5rpx;
							margin-left: 20rpx;

							.perzhentext_big {
								font-size: 32rpx
							}

							.perzhentext_bottom {
								display: flex;
								flex-direction: column;
								margin-top: 20rpx;
							}
						}
					}

					.rightBottom {
						width: 100%;
						height: 148rpx;
						background-image: url('https://peiyiwang.obs.cn-east-3.myhuaweicloud.com:443/file%2F5840079953960931.png');
						background-size: cover;

						.perzhentext {
							margin-top: 5rpx;
							margin-left: 20rpx;

							.perzhentext_big {
								font-size: 32rpx
							}

							.perzhentext_bottom {
								display: flex;
								flex-direction: column;
								margin-top: 20rpx;
							}
						}
					}
				}
			}

			.imghf {
				width: 100%;
				height: 80rpx;
				margin: 20rpx auto;
				border-radius: 16rpx;
			}

			.recommend {
				display: flex;
				justify-content: space-between;

				.recommend_bg {
					background: linear-gradient(135deg, #9BB7FF, #9BB7FF);
					font-size: 20rpx;
					width: 212rpx;
					height: 152rpx;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					position: relative;
					top: 0;

					.recomtext1 {
						position: absolute;
						top: 20rpx;
						color: #386FFF;
						margin-left: 20rpx;

						.title1 {
							font-size: 24rpx;
							font-weight: 600;
						}

						.text1 {
							display: flex;
							flex-direction: column;
							margin-top: 19rpx;
						}

						.text1 {
							display: flex;
							flex-direction: column;
						}
					}

					.recommend1 {
						width: 102%;
						height: 100%;



					}

					.recommend2 {
						width: 107%;
						height: 100%;
					}

					.recommend3 {
						width: 100%;
						height: 100%;
					}

				}
			}



			uni-page-body {
				height: 100%;
			}

			.userOptions {
				width: 100vw;
				padding-top: 38rpx;
				padding-bottom: 43rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.option {
					width: 100rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					span {
						font-size: 25rpx;
						font-size: 25rpx;
						font-weight: 400;
						color: #676767;
						margin-top: 13rpx;
					}

					.optionImg {
						width: 90rpx;
						height: 90rpx;

					}
				}
			}

			.notice {
				width: 95vw;
				height: 60rpx;
				display: grid;
				margin: 10rpx auto;
				grid-template-columns: 56rpx 136rpx auto 6rpx;
				align-items: center;
				background-color: #E7EEFE;
				border-radius: 8rpx;

				img {
					width: 34rpx;
					height: 34rpx;
				}

				.title {
					height: 38rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #386FFF;
					line-height: 38rpx;
				}

				.content {
					height: 38rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #333333;
					line-height: 38rpx;
					letter-spacing: 2px;
				}

				.more {
					font-size: 24rpx;
				}
			}

			.detail {
				padding-bottom: calc(160rpx + env(safe-area-inset-bottom));

				.header {
					display: flex;
					justify-content: space-between;
					padding-top: 48rpx;

					.title {
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 38rpx;
						letter-spacing: 2rpx;
					}
				}

				.scroll-view_H {
					white-space: nowrap;
					width: 100%;
				}

				.detailContent {
					padding: 0rpx 38rpx 0 38rpx;
					display: flex;
					flex-direction: column;

					.hospitalCard {
						margin-top: 30rpx;
					}

				}
			}

			.more {
				width: 80rpx;
				display: flex;
				align-items: center;

				span {
					font-size: 27rpx;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #6F7DA2;
					line-height: 27rpx;
					letter-spacing: 2px;
				}

				img {
					width: 12rpx;
					height: 24rpx;
					margin-left: 5rpx;
				}
			}

		}

		.blank {
			background-color: #F6F6F6;
			width: 100%;
			height: 20rpx;

		}

		.bottom_content {
			display: flex;
			flex-direction: column;

			.content_tab {
				font-size: 28rpx;
				// display: flex;
				// padding: 0 45rpx;
				// justify-content: space-between;

				.tab_text {
					display: flex;
					align-items: center;

					.bars {
						margin: 35rpx 20rpx;
						width: 2rpx;
						height: 24rpx;
						background-color: #CACACA;
					}
				}
			}

			.tab_content {
				// margin-bottom: 100rpx;
				display: flex;
				background-color: #F7F7F7;
				flex-wrap: wrap;
				padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

				.accompany1 {
					display: flex;
					flex-direction: column;
					margin: 20rpx 17rpx;
					// border-radius: 10rpx;
					// padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

					.serve1img {
						width: 340rpx;
						height: 340rpx;
						border-radius: 20rpx 20rpx 0 0;
					}

					.accompany1_con {
						background-color: #fff;
						border-radius: 0 0 20rpx 20rpx;

						.house1 {
							display: block;
							margin: 20rpx 20rpx 0 20rpx;
							font-weight: 600;
							width: 90px;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.price {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 24rpx;

							.price1 {
								color: #3F67F6;
								font-size: 32rpx;
							}

							.ins_bott {
								display: flex;
								flex-direction: column;

								.sale {
									color: #999999;
									font-size: 20rpx;
									margin: 10rpx;
									text-align: right;
								}

								.instantly {
									background-color: #3F67F6;
									padding: 10rpx 20rpx;
									border-radius: 10rpx;
									color: #FFFFFF;
									font-size: 24rpx;
								}
							}
						}
					}
				}


			}
		}

	}
</style>